<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="账户设置"
             :white="false">
    </top-bar>
    <page-content class="er-order">
      <div class="un-container">
        <div class="un-list">
          <div class="un-listm"
               @click="changPhoto">
            <span class="un-tw">头像</span>
            <div>
              <img 
                v-if="!user.user_head" 
                src="../../assets/image/mine/head.png"
                alt=""
                class="un-tx">
              <img 
                v-else 
                :src="user.user_head"
                  alt=""
                  class="un-tx">
              <span class="un-arrow">
                <van-icon name="arrow"
                          color="#AEADB9"
                          size="14" />
              </span>
            </div>
          </div>
          <div class="un-listm"
               id='un-lists'
               @click="changeName">
            <span class="un-tw">昵称</span>
            <div>
              <span class="un-tw">{{user.nickname}}</span>

              <span class="un-arrow">
                <van-icon name="arrow"
                          color="#AEADB9"
                          size="14" />
              </span>
            </div>
          </div>
          <div class="un-listm"
               id='un-lists'>
            <span class="un-tw">登录手机号</span>
            <div>
              <span class="un-tw">{{user.phone | hidePhone}}</span>
              <span></span>
            </div>
          </div>
          <!-- <div class="un-listm"
               id='un-lists'
               @click="checkInfor">
            <span class="un-tw">身份认证</span>
            <span class="un-arrow">
              <van-icon name="arrow"
                        color="#AEADB9"
                        size="14" />
            </span>
          </div> -->
        </div>
        <!--  -->
        <div class="un-s">
          <div class="un-listm"
               id='un-lists'
               @click="goSafe">
            <span class="un-tw">账户与安全</span>
            <span class="un-arrow">
              <van-icon name="arrow"
                        color="#AEADB9"
                        size="14" />
            </span>
          </div>
          <!-- <div class="un-listm"
               id='un-lists'>
            <span class="un-tw">收/付款设置</span>
            <span class="un-arrow">
              <van-icon name="arrow"
                        color="#AEADB9"
                        size="14" />
            </span>
          </div> -->
        </div>
        <!--  -->
        <div class="un-tczh"
             @click="quit">退出当前账户</div>
        <div>
        </div>
      </div>
      <van-action-sheet v-model="show"
                        title="更换头像">
        <div class="content">
          <div class="y-con">
            <van-uploader
                        :after-read="afterRead">
              <div class="up-btn">从相册里选</div>
            </van-uploader>
          </div>
          <!-- <div class="y-con">
            <van-uploader capture="camera"
                        :after-read="afterRead">
              <div class="up-btn">拍照</div>
            </van-uploader>
          </div> -->
        </div>
      </van-action-sheet>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';
import Vue from 'vue';
import { Icon, Popup, Dialog, ActionSheet, Toast } from 'vant';
// 全局注册
Vue.use(Dialog);
Vue.use(Popup);
Vue.use(Icon);
Vue.use(ActionSheet);
export default {
  data () {
    return {
      active: 0,
      show: false,
      filePath: "",
      user: {}
    }
  },
  components: {
    TopBar,
    PageView,
    PageContent
  },
  created(){
    this.user = this.$store.state.user || {};
  },
  mounted () { 
  },
  methods: {
    goTransfer () {
      this.$router.push({ path: '/transfer' })
    },
    // 退出登录
    quit () {
      Dialog.confirm({
        title: '温馨提示',
        message: '是否退出登录？',
        confirmButtonColor: '#585DF9'
      })
      .then(() => {
        // on confirm
        this.$store.dispatch('logout');
        this.$router.push({
          path: '/home'
        })
      })
      .catch(() => {
        // on cancel
      });
    },

    getData(){
      return service.post('/apiMy.do', null, {
        hideloading: true
      }).then(res=>{
        this.user = res.data
      })
    },
    //更换头像
    changPhoto () {
      this.show = true;
    },
    //更换名字
    changeName () {
      this.$router.push({ path: '/changeName' })
    },
    //安全
    goSafe () {
      this.$router.push({ path: '/safe' })
    },
    afterRead(res){
      this.file = res.file;
      this.show = false;
      this.submitFile();
    },
    upload(){
      let formData = new FormData();
      // 向 formData 对象中添加文件
      formData.append('file', this.file);
      return service.post('/uploadFile.do', formData, {
        hideloading: true
      }).then(res=>{
        this.filePath = res.data.src
      })
    },
    saveHead(){
      return service.post('/apiModifyMy.do', {
        nickname: this.user.nickname,
        user_head: this.filePath
      })
    },
    submitFile(){
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '上传图片',
      });
      this.upload().then(()=>{
        toast.message = `保存中`;
        return this.saveHead();
      }).then(()=>{
        setTimeout(()=>{
          toast.clear()
          this.show = false;
          this.user.user_head = this.filePath;

          this.$store.dispatch('setUser', this.user)
          // this.getData();
        }, 1000);
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 15px 0;
  .y-con {
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #3d3e54;
  }
  .up-btn{
    padding: 0 15px;
    width: 100vw;
    line-height: 50px;
  }
}
.un-container {
  width: 100vw;
  overflow: hidden;

  .bz-header {
    height: 29px;
    background: #fff;
    overflow: hidden;
    margin-top: 39px;
    .d-tit {
      width: 100%;
      text-align: center;
      position: relative;

      // padding: 0 20px;
      .p-back {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        position: absolute;
        left: 20px;
        top: 3px;
      }
      .p-center {
        width: auto;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #000;
        line-height: 28px;
        margin: 0 auto;
        vertical-align: middle;
        display: inline-block;
      }
    }
  }
  .un-list {
    // height: 235px;
    background: #fff;
    margin-top: 12px;
    padding: 0 20px;
    margin-top: 70px;
    .un-listm {
      box-sizing: border-box;
      height: 70px;
      line-height: 70px;
      display: flex;
      justify-content: space-between;
      position: relative;
      border-top: 1px solid #eee;
      .un-tx {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        margin-top: 12px;
        display: inline-block;
        vertical-align: top;
      }
      .un-arrow {
        display: inline-block;
        vertical-align: top;
        // position: absolute;
        // top: 2px;
        margin-top: 3px;
        margin-left: 9px;
      }
      .un-tw {
        font-size: 16px;
        font-weight: 500;
        color: #3d3e54;
      }
    }
  }
  .un-s {
    padding: 0 20px;
    margin-top: 29px;
    height: 55px;
    background: #fff;
    box-sizing: border-box;
    .un-listm {
      box-sizing: border-box;
      height: 70px;
      line-height: 70px;
      display: flex;
      justify-content: space-between;
      position: relative;
      border-bottom: 1px solid #eee;
      .un-tx {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        margin-top: 12px;
        display: inline-block;
        vertical-align: top;
      }
      .un-arrow {
        display: inline-block;
        vertical-align: top;
        // position: absolute;
        // top: 2px;
        margin-top: 3px;
        margin-left: 9px;
      }
      .un-tw {
        font-size: 16px;
        font-weight: 500;
        color: #3d3e54;
      }
    }
  }
  .un-tczh {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #f4f4f4;
    font-size: 16px;
    font-weight: 400;
    color: #d90000;
    margin-top: 20%;
  }
  #un-lists {
    height: 55px;
    line-height: 55px;
  }
}
</style>
